<template>
  <el-container class="wrapper">
    <el-header class="bg-white flex">
      <!-- 头开始 -->
      <Head />
      <!-- 头结束 -->
    </el-header>
    <hr class="hr" />
    <el-container>
      <!-- 菜单开始 -->
      <LeftCatalogue />
      <!-- 菜单结束 -->
      <div class="content-box" :class="{ 'content-collapse': collapsed }">
        <linear-fade-in-box class="content" />
      </div>
      <!-- 内容开始 -->

      <!-- 内容结束 -->
    </el-container>
  </el-container>
</template>
<script setup>
//
import { ref } from "vue";
//头
import Head from "@/components/Layout/Head.vue";
//左边
import LeftCatalogue from "@/components/Layout/LeftCatalogue.vue";
//内容
import LinearFadeInBox from "@/components/Layout/LinearFadeInBox.vue";
//
import { storeToRefs } from "pinia";
//
import { useMenuStore } from "@/store/HomeMenu";
/**
 *
 */
const store = useMenuStore();
/**
 *
 */
const { collapsed } = storeToRefs(store);
</script>

<style>
.wrapper {
  height: 100vh;
  overflow: hidden;
}

.hr {
  margin: 0;
  background-color: #e6e6e6;
  height: 1px;
  border: none;
}

.el-main {
  --el-main-padding: 10px;
  box-sizing: border-box;
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  padding: var(--el-main-padding);
}

.content-box {
  position: absolute;
  left: 165px;
  right: 0;
  top: 62px;
  bottom: 0;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
  background: #eef0fc;
  overflow: hidden;
}

.content {
  height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
}

.content::-webkit-scrollbar {
  width: 0;
}

.content-collapse {
  left: 65px;
}
</style>
